<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {defineExpose, defineProps, inject, onMounted, onUnmounted, ref, shallowRef, watch} from "vue";
import {pxToRem} from "@/utils/index";

const props = defineProps({
  barData: {
    type: Object,
    default: () => ({})
  },
  intervalData: {
    type: Object,
    default: ({
      currentIndex: 0
    })
  },
  dialogData: {
    type: Object,
    default: () => ({
      fontSizeTimes: 1
    })
  }
});

watch(
    () => props?.intervalData?.currentBarIndex,
    (newVal) => {
      if (myChart.value) {
        myChart.value.resize()
      }
    }
)

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');

const initEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    let option = {
      barMaxWidth: pxToRem(11 * props?.dialogData?.fontSizeTimes),
      grid: {
        left: `${props?.dialogData?.fontSizeTimes === 1 ? -8 : -2}%`,
        right: 0,
        bottom: 0,
        top: `${props?.dialogData?.fontSizeTimes === 1 ? 30 : 15}%`,
        containLabel: true,
      },
      tooltip: {formatter: formateTooltip},
      xAxis: {
        show: false
      },
      yAxis: [
        {
          type: 'category',
          inverse: true,
          name: '开发商',
          nameLocation: 'start',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(14 * props?.dialogData?.fontSizeTimes),
            padding: [0, 0, 0, pxToRem(-60 * props?.dialogData?.fontSizeTimes)],
          },
          nameGap: pxToRem(20 * props?.dialogData?.fontSizeTimes),
          data: props?.barData?.yAxisData,
          boundaryGap: false,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            formatter: function (value) {
              // 根据实际情况调整标签长度
              return value.length > 2 ? value.slice(0, 2) + '...' : value;
            },
            color: (params) => {
              return props?.barData?.yAxisData?.[props?.intervalData?.currentBarIndex] === params ? 'white' : '#d1d1d1'
            },
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            interval: 0,
            align: 'left',
            margin: pxToRem(50 * props?.dialogData?.fontSizeTimes),
            overflow: 'truncate',
          },
          triggerEvent: true
        },
        {
          type: 'category',
          inverse: true,
          name: '数量',
          nameLocation: 'start',
          nameTextStyle: {
            color: 'white',
            fontSize: pxToRem(14 * props?.dialogData?.fontSizeTimes),
            align: 'left',
            padding: [0, 0, 0, pxToRem(20 * props?.dialogData?.fontSizeTimes)],
          },
          nameGap: pxToRem(20 * props?.dialogData?.fontSizeTimes),
          data: props?.barData?.seriesData,
          boundaryGap: false,
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
          axisLabel: {
            formatter: function (value) {
              // 根据实际情况调整标签长度
              return value.length > 4 ? value.slice(0, 4) + '...' : value;
            },
            color: (params) => {
              return props?.barData?.yAxisData?.[props?.intervalData?.currentBarIndex] === params ? 'white' : '#d1d1d1'
            },
            fontSize: pxToRem(12 * props?.dialogData?.fontSizeTimes),
            interval: 0,
            align: 'right',
            margin: pxToRem(50 * props?.dialogData?.fontSizeTimes),
            overflow: 'truncate',
          },
          triggerEvent: true
        },
      ],
      series: [
        {
          data: props?.barData?.seriesData,
          type: 'bar',
          itemStyle: {
            borderRadius: pxToRem(50 * props?.dialogData?.fontSizeTimes),
            color: (params) => {
              return props?.intervalData?.currentBarIndex === params.dataIndex ? '#00f9fd' : '#1fb6fd'
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: '#05578a',
            borderRadius: pxToRem(50)
          }
        }
      ],
    }
    myChart.value.on('mouseover', (params)=> {
      if (params.componentType === 'yAxis') {
        yLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        myChart.value.setOption({tooltip: {
            formatter: formateTooltip,
            alwaysShowContent: true
          }})
        myChart.value.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      }
    })
    myChart.value.on('mouseout', (params)=> {
      if (params.componentType === 'yAxis') {
        yLabel = ''
        myChart.value.setOption({tooltip: {
            formatter: formateTooltip,
            alwaysShowContent: false
          }})
      }
    })
    let yLabel = ''
    function formateTooltip (params) {
      return yLabel
    }
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

defineExpose({
  updateChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h220 {
  height: 220px;
}
.dialog-h220 {
   width: 1120px;
   height: 500px;
 }
</style>